<template>
    <div class="login-container">
        <div class="login-background">
            <div class="login-overlay"></div>
        </div>

        <div class="login-content">
            <div class="login-header">
                <h1 class="system-title">畜牧育种管理系统</h1>
                <p class="system-subtitle">Livestock Breeding Management System</p>
            </div>

            <el-card class="login-card">
                <!-- <div class="login-form-header">
                    <h2></h2>
                    <p>Welcome!</p>
                </div> -->

                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login-form">
                    <el-form-item prop="userName">
                        <el-input v-model="ruleForm.userName" placeholder="请输入用户名" size="large" :prefix-icon="User" />
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" size="large"
                            :prefix-icon="Lock" show-password />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)" size="large" class="login-button"
                            :loading="loading">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>

    <!-- 登录成功弹框 -->
    <el-dialog v-model="loginSuccessVisible" title="" width="400px" class="login-success-dialog"
        :close-on-click-modal="false" :modal="true" :modal-class="'login-modal'" :append-to-body="true"
        :destroy-on-close="false" :center="true" :show-close="false">
        <div class="login-success-content">
            <div class="success-icon-container">
                <div class="success-icon">
                    <el-icon size="48" color="#67C23A">
                        <Check />
                    </el-icon>
                </div>
                <div class="success-circle"></div>
            </div>

            <div class="success-text-container">
                <h3 class="success-title">登录成功！</h3>
                <p class="success-subtitle">欢迎使用畜牧育种管理系统</p>
                <p class="success-welcome">正在为您跳转到系统首页...</p>
            </div>

            <div class="loading-progress">
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Reads, Writes } from '@/Utils/axiosHelper'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { User, Lock, Check } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()

interface RuleForm {
    "userName": string,
    "password": string
}

const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const loginSuccessVisible = ref(false)
const ruleForm = reactive<RuleForm>({
    "userName": "",
    "password": ""
})

const rules = reactive<FormRules<RuleForm>>({
    userName: [
        { required: true, message: '请输入用户名！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入账号密码！', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            Reads.post("/Management/Login", ruleForm).then(res => {
                if (res.data.code == 500) {
                    Object.assign(counter.user, res.data.data)
                    // 显示登录成功弹框
                    loginSuccessVisible.value = true
                    // 延迟跳转，让用户看到成功动画
                    setTimeout(() => {
                        router.push("/HomePage")
                    }, 2000)
                }
                else {
                    ElMessage.error(res.data.message)
                    resetForm(formEl)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/SheepNew.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.login-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    /* padding: 100px; */
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
    color: white;
}

.logo {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.system-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.system-subtitle {
    font-size: 14px;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

.login-form-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-form-header h2 {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 8px;
}

.login-form-header p {
    color: #7f8c8d;
    font-size: 14px;
}

.login-form {
    width: 100%;
}

.login-button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.login-button:active {
    transform: translateY(0);
}

:deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:deep(.el-input__wrapper):hover {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

:deep(.el-input__wrapper).is-focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 登录成功弹框样式 */
.login-success-dialog {
    border-radius: 16px;
    overflow: hidden;
    animation: successDialogSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.login-success-content {
    padding: 40px 30px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.success-icon-container {
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
}

.success-icon {
    position: relative;
    z-index: 2;
    animation: successIconBounce 0.8s ease-out;
}

.success-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
    transform: translate(-50%, -50%);
    animation: successCircleExpand 0.8s ease-out;
    opacity: 0.2;
}

.success-text-container {
    margin-bottom: 30px;
}

.success-title {
    font-size: 24px;
    font-weight: bold;
    color: #67C23A;
    margin: 0 0 12px 0;
    animation: successTextSlideIn 0.6s ease-out 0.3s both;
}

.success-subtitle {
    font-size: 16px;
    color: #606266;
    margin: 0 0 8px 0;
    animation: successTextSlideIn 0.6s ease-out 0.4s both;
}

.success-welcome {
    font-size: 14px;
    color: #909399;
    margin: 0;
    animation: successTextSlideIn 0.6s ease-out 0.5s both;
}

.loading-progress {
    margin-top: 20px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(103, 194, 58, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #67C23A 0%, #85CE61 100%);
    border-radius: 2px;
    animation: progressFill 2s ease-out;
}

/* 弹框进入动画 */
@keyframes successDialogSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-100px) rotate(-10deg);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1) translateY(-20px) rotate(2deg);
    }

    70% {
        opacity: 0.9;
        transform: scale(0.95) translateY(5px) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
    }
}

/* 成功图标动画 */
@keyframes successIconBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 成功圆圈动画 */
@keyframes successCircleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }
}

/* 文字滑入动画 */
@keyframes successTextSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 进度条填充动画 */
@keyframes progressFill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* 弹框背景遮罩 */
.login-modal {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    100% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

/* 隐藏弹框标题 */
:deep(.login-success-dialog .el-dialog__header) {
    display: none;
}

:deep(.login-success-dialog .el-dialog__body) {
    padding: 0;
}

@media (max-width: 768px) {
    .login-content {
        padding: 15px;
    }

    .system-title {
        font-size: 24px;
    }

    .login-card {
        padding: 20px;
    }

    .login-success-content {
        padding: 30px 20px;
    }

    .success-title {
        font-size: 20px;
    }

    .success-subtitle {
        font-size: 14px;
    }
}
</style>
